<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #one{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
        }
        #two{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        form{
            float: left;
        }

        .one1{
            transform:translate(10px);
            -webkit-transform:translate(10px);
            -moz-transform:translate(10px);
            -ms-transform:translate(10px);
        }
        .one2{
            transform:translate(20px);
            -webkit-transform:translate(20px);
            -moz-transform:translate(20px);
            -ms-transform:translate(20px);
        }
        .one3{
            transform:translate(20px,10px);
            -webkit-transform:translate(20px,10px);
            -moz-transform:translate(20px,10px);
            -ms-transform:translate(20px,10px);
        }
        .one4{
            transform:translate(20px,20px);
            -webkit-transform:translate(20px,20px);
            -moz-transform:translate(20px,20px);
            -ms-transform:translate(20px,20px);
        }
        .one5{
            transform:translate(50px,50px);
            -webkit-transform:translate(50px,50px);
            -moz-transform:translate(50px,50px);
            -ms-transform:translate(50px,50px);
        }
        .one6{
            transform:translate(100px,100px);
            -webkit-transform:translate(100px,100px);
            -moz-transform:translate(100px,100px);
            -ms-transform:translate(100px,100px);
        }
        .one7{
            transform:translate(-25px,-25px);
            -webkit-transform:translate(-25px,-25px);
            -moz-transform:translate(-25px,-25px);
            -ms-transform:translate(-25px,-25px);
        }
        .one8{
            transform:none;
            -webkit-transform:none;
            -moz-transform:none;
            -ms-transform:none;
        }
    </style>
</head>
<body>
<form action="#">
    <input type="radio" name="nn" value="translate" onclick="one1()"/>translate(10px)</br>
    <input type="radio" name="nn" value="translate" onclick="one2()"/>translate(20px)</br>
    <input type="radio" name="nn" value="translate" onclick="one3()"/>translate(20px,10px)</br>
    <input type="radio" name="nn" value="translate" onclick="one4()"/>translate(20px,20px)</br>
    <input type="radio" name="nn" value="translate" onclick="one5()"/>translate(50px,50)</br>
    <input type="radio" name="nn" value="translate" onclick="one6()"/>translate(100px,100px)</br>
    <input type="radio" name="nn" value="translate" onclick="one7()"/>translate(-25px,-25px)</br>
    <input type="radio" name="nn" value="translate" onclick="one8()"/>none
</form>
<div id="one">
    <div id="two">MY DIV</div>
</div>

</body>
<script type="text/javascript">
    var rad = document.getElementById("two");
    function one1(){
        rad.className="one1";
    }
    function one2(){
        rad.className="one2";
    }
    function one3(){
        rad.className="one3";
    }
    function one4(){
        rad.className="one4";
    }
    function one5(){
        rad.className="one5";
    }
    function one6(){
        rad.className="one6";
    }
    function one7(){
        rad.className="one7";
    }
    function one8(){
        rad.className="one8";
    }
</script>
</html>